<template>
  <vxe-grid ref="gridRef3" v-bind="gridOptions3">
    <template #active="{ row }">
      <vxe-button
        mode="text"
        status="primary"
        content="编辑"
        icon="vxe-icon-edit"
        @click.stop="updateRow(row)"
      ></vxe-button>
      <vxe-button
        mode="text"
        status="primary"
        content="删除"
        icon="vxe-icon-edit"
        @click="deleteData(row)"
      ></vxe-button>
      <vxe-button
        mode="text"
        status="primary"
        content="修改状态"
        icon="vxe-icon-edit"
        @click="updateWoRawStatus(row)"
      ></vxe-button>
    </template>
  </vxe-grid>
</template>

<script>
import {
  getWoRawSubRelFaultByPage,
  addWoRawSubRelFault,
} from "@/api/product/woRawSubRelFault";
import { VxeUI } from "vxe-pc-ui";
import XEUtils, { first } from "xe-utils";
export default {
  name: "woRaw",
  props: {
    woRawSub: {
      type: Object,
      default: () => {
        return {
          wo: "",
          workNo: "",
          id: 0,
          // fixedPagination: true
        };
      },
    },
    formData: {
      type: Object,
      default: () => {
        return {
          workNo: "",

          // fixedPagination: true
        };
      },
    },
  },
  data() {
    const gridOptions3 = {
      sortConfig: {
        remote: true,
      },
      loading: false,
      stripe: true,
      showOverflow: true,
      showFooter: true,

      columnConfig: {
        resizable: true,
        drag: true,
      },
      columnDragConfig: {
        trigger: "cell",
        showIcon: false,
        showGuidesStatus: true,
      },
      rowConfig: {
        isHover: true,
      },
      resizableConfig: {
        isDblclickAutoWidth: true,
      },
      pagerConfig: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },

      formConfig: {
        data: {
          name: "",
          role: "",
          sex: "",
          num: "",
          address: "",
        },
        items: [
          {
            field: "name",
            title: "名称",
            span: 8,

            itemRender: { name: "VxeInput", props: { clearable: true } },
          },

          {
            field: "createTime",
            title: "时间",
            span: 8,

            itemRender: {
              name: "VxeDatePicker",
              props: {
                multiple: true,
              },
            },
          },

          {
            collapseNode: true,
            align: "right",
            span: 8,
            itemRender: {
              name: "VxeButtonGroup",
              options: [
                { type: "submit", content: "搜索", status: "primary" },
                { type: "reset", content: "重置" },
              ],
            },
          },
        ],
      },
      columns: [
        { type: "checkbox", width: 60 },
        { field: "seq", type: "seq", width: 70 },

        {
          field: "faultTypeName",
          title: "故障名称",
          sortable: true,
          width: 180,
        },
        {
          field: "startMetre",
          title: "开始米数",
          sortable: true,
          width: 180,
        },
        {
          field: "endMetre",
          title: "结束米数",
          sortable: true,
          width: 180,
        },

        // {
        //   field: "startTime",
        //   title: "计划开工时间",
        //   sortable: true,
        //   width: 180,
        // },
        { field: "createTime", title: "创建时间", width: 180 },
        {
          field: "active",
          title: "操作",
          fixed: "right",
          width: 300,
          slots: { default: "active" },
        },
      ],
      scrollX: {
        gt: 0,
        enabled: true,
      },
      scrollY: {
        gt: 0,
        enabled: true,
      },
      proxyConfig: {
        // props: {
        //   result: 'result', // 配置响应结果列表字段
        //   total: 'page.total' // 配置响应结果总页数字段
        // },

        sort: true,
        form: true,
        ajax: {
          query: async ({ page, sorts, form }) => {
            // console.log(page, sorts, form, "----");

            // 默认接收 Promise<{ result: [], page: { total: 100 } }>
            let result = await getWoRawSubRelFaultByPage({
              ...page,
              // wo: this.woRawSub.wo
              //   ? this.woRawSub.wo
              //   : value
              //   ? JSON.parse(value)
              //   : null,
              /**
               * 子卷信息
               */
              woRawSubId: this.woRawSub.id ? this.woRawSub.id : 0,
            });
            this.woRawSub = { id: null, wo: null };
            return {
              result: result.data.records,
              page: {
                total: result.data.total,
              },
            };
          },
        },
      },
    };
    return {
      gridOptions3,
      localWoRawSub: this.woRawSub,
      localFormData: this.formData,
    };
  },
  methods: {
    async updateRow() {
      console.log("===>", row);
    },
    async updateWoRawStatus(row) {
      //这个需要赋值
      this.formOptions2.data = row;
      this.showPopup2 = true;
    },
    removeRow(row) {
      const $grid = this.$refs.gridRef2;
      if ($grid) {
        $grid.remove(row);
        VxeUI.modal.message({
          content: "数据已删除",
          status: "success",
        });
      }
    },
    // async insert(record) {
    //   this.$refs.gridRef2.insert(record);
    // },
    // getInsertRecords() {

    // }
  },
};
</script>
